<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Users</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

<link href="css/jquery.dataTables.css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.js"></script>

</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold">Req1</a>
				<div class="nav-collapse collapse">

					<ul class="nav">
						<li><a href="home">Home</a></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Use Cases <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newusecase">New</a></li>
								<li><a href="listusecases">View All</a></li>

							</ul></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Projects <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="listprojects">View All</a></li>

							</ul></li>


						<li class="dropdown active"
							sec:authorize="hasRole('ROLE_COMPANY_ADMIN')"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Users <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newuser">New</a></li>
								<li><a href="listusers">View All</a></li>

							</ul></li>


						<li class="dropdown pull-right"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Tickets <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="viewallprojects">View All</a></li>

							</ul></li>

						<li><a href="#about">Help</a></li>
						<li><a href="#contact">Contact</a></li>


					</ul>


					<div class="pull-right">
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								th:text="'Hi! ' + ${#authentication.name}"
								data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="/user/preferences"><i class="icon-cog"></i>
											Preferences</a></li>
									<li><a href="/help/support"><i class="icon-envelope"></i>
											Contact Support</a></li>
									<li class="divider"></li>
									<li><a href="/auth/logout"><i class="icon-off"></i>
											Logout</a></li>
								</ul></li>
						</ul>
					</div>




				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">

			<!--/span-->
			<div class="span12">
			
				<h2 th:text="${selection}? 'Select Users' : 'List of users'">List of users</h2>
				<h4 th:text="${project != null} ? ' Project:' + ${project.name} : ''"></h4>

				<table id="myTableId" dt:table="true" dt:theme="bootstrap2" class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th>Id</th>
							<th>Name</th>
							<th>Email</th>
							<th>Company</th>
							<th>Created Date</th>
							<th>Last Updated Date</th>
							
							
						</tr>
					</thead>
					<tbody>
						<tr th:each="u : ${users}">
							<td>
								<a th:if="${!selection}" href="details.html" th:href="@{/edituser(user=${u.id})}"  th:text="${u.id}">1</a>
								<a th:if="${selection}" href="details.html" th:href="@{/newprojectuser(user=${u.id},project=${project.id})}"  th:text="${u.id}">1</a>
							
							</td>
							<td th:text="${u.name}">John</td>
							<td th:text="${u.email}">John</td>
							<td th:text="${u.company.name}">Company</td>
							<td th:text="${u.createdDate}">Doe</td>
							<td th:text="${u.lastUpdatedDate}">Nobody knows !</td>
							
						</tr>
					</tbody>
				</table>


			</div>
			<!--/span-->
		</div>
		<!--/row-->

		<hr />

		<footer>
			<p>&copy; Company 2013</p>
		</footer>

	</div>
	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	
	<script src="js/bootstrap-transition.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-typeahead.js"></script>
	
	
	

</body>
</html>
